<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>弹出框</title>
    <!--不允许缩放-->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <!--chrome=1优先选择急速模式，优先选择chrome内核-->
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <link rel="stylesheet " type="text/css " href="css/globle.css "/>
    <link rel="stylesheet " type="text/css " href="css/style.css "/>
    <script src='js/jquery.js'></script>
</head>
<style>
    body{
        background-color: black;
    }
    .into img{
        width: 30px;
        height: 30px;
    }
    .popover {
        /*border: 1px solid blue;*/
        width: 900px;
        height: 650px;
        margin-left: 250px;
        background-color: #fff;
        position: relative;
        display: none;
    }
    .popover .grade {
        width: 100%;
        border-bottom: 6px solid palegreen;
        height: 182px;
        line-height: 182px;
        position: relative;

    }
    .popover .grade img {
        width: 170px;
        height: 150px;
        /*border: 1px solid blue;*/
    }
    .popover .grade span{
        font-size: 36px;
        color:#333333;
    }
    .popover .grade small {
        font-size: 30px;
        color: #333333;
    }
    .popover .grade button {
        width: 100px;
        height: 40px;
        font-size: 14px;
        border-radius: 8px;
        position: absolute;
        top:70px;
        right: 100px;
        background: #0099cb;
        cursor: pointer;
    }
    .popover .grade .err {
        font-size: 19px;
        cursor: pointer;
        position: absolute;
        top:-80px;
        right: 7px;
    }
    .list-img{
        width: 100%;
        height: 462px;
        /*border: 1px solid red;*/
        position: relative;
    }
    .loading {
        position: absolute;
        top:0;
        left:95px;
        width: 800px;
        height: 462px;
        /*border: 1px solid yellow;*/
        overflow: hidden;
    }
    .loading li{
        float: left;
        width: 90px;
        height: 90px;
        /*border: 1px solid red;*/
       margin: 20px 30px 20px 0px;
        /*border-radius: 50px;*/
        position: relative;
    }
    .loading li p{
        font-size: 12px;
        color:#01a7de;
        text-align: center;
        position: absolute;
        top:90px;
        left: 30px;
        display: none;
    }
    .loading li img{
        width: 80px;
        height: 80px;
        border-radius: 50px;
        display: none;
        margin: 5px 5px;

    }
    .loading li img {
        -webkit-animation: circle 1s linear;
    }

    @-webkit-keyframes circle {
        0% {
            transform: rotate(0deg);
        }
        25% {
            transform: rotate(128deg);
        }
        50% {
            transform: rotate(256deg);
        }
        75% {
            transform: rotate(384deg);
        }
        100% {
            transform: rotate(640deg);
        }
    }
    .box-img{
        width: 800px;
        height: 462px;
        position: absolute;
        top:0;
        left:95px;
        overflow: hidden;
        /*border: 1px solid red;*/
    }
    .box-img  li {
        width: 90px;
        height: 90px;
        float: left;
        margin: 20px 30px 20px 0px;
    }
    .box-img li img{
        width: 50px;
        height: 50px;
        margin: 21px 21px;

    }

    .data{
        /*border: 1px solid red;*/
        width: 700px;
        height: 462px;
        position: absolute;
        top:188px;
        left:95px;
        background-color: #fff;
        display: none;
    }
    .data p{
        font-size: 14px;
        margin: 20px 30px 20px 30px;
    }
</style>
<body>
<div class="into">
    <img src="images/heal3.gif" alt="">
</div>
<div class="popover">
    <div class="grade">
        <img src="images/heal3.gif" alt="">
        <small>正在检测：</small><span class="gaosu">成安渝高速</span>
        <button>正在体检</button>
        <span class="err">x</span>
    </div>
    <div class="list-img">
    <ul class="loading">
        <li><img src="images/huan.png" alt="" class="popImg"> <p class="have">已检测</p></li>
        <li><img src="images/huan.png" alt="" class="popImg"> <p class="have">已检测</p></li>
        <li><img src="images/huan.png" alt="" class="popImg"> <p class="have">已检测</p></li>
        <li><img src="images/huan.png" alt="" class="popImg"> <p class="have">已检测</p></li>
        <li><img src="images/huan.png" alt="" class="popImg"> <p class="have">已检测</p></li>
        <li><img src="images/huan.png" alt="" class="popImg"> <p class="have">已检测</p></li>
        <li><img src="images/huan.png" alt="" class="popImg"> <p class="have">已检测</p></li>
        <li><img src="images/huan.png" alt="" class="popImg"> <p class="have">已检测</p></li>
        <li><img src="images/huan.png" alt="" class="popImg"> <p class="have">已检测</p></li>
        <li><img src="images/huan.png" alt="" class="popImg"> <p class="have">已检测</p></li>
        <li><img src="images/huan.png" alt="" class="popImg"> <p class="have">已检测</p></li>
        <li><img src="images/huan.png" alt="" class="popImg"> <p class="have">已检测</p></li>
        <li><img src="images/huan.png" alt="" class="popImg"> <p class="have">已检测</p></li>
        <li><img src="images/huan.png" alt="" class="popImg"> <p class="have">已检测</p></li>
        <li><img src="images/huan.png" alt="" class="popImg"> <p class="have">已检测</p></li>
        <li><img src="images/huan.png" alt="" class="popImg"> <p class="have">已检测</p></li>
        <li><img src="images/huan.png" alt="" class="popImg"> <p class="have">已检测</p></li>
        <li><img src="images/huan.png" alt="" class="popImg"> <p class="have">已检测</p></li>
    </ul>
    <ul class="box-img">
        <li>    </li>
        <li>   </li>
        <li>      </li>
        <li>        </li>
        <li>            </li>
        <li>            </li>
        <li>          </li>
        <li>      </li>
        <li>     </li>
        <li>          </li>
        <li>           </li>
        <li>     </li>
        <li>          </li>
        <li>            </li>
        <li>        </li>
        <li>          </li>
        <li>             </li>
        <li>              </li>
    </ul>
    </div>
   <div class="data">
        <p>在天愿作比翼鸟，在地愿为连理枝。天长地久有时尽，此恨绵绵无绝期。
            玉惨花愁出凤城，莲花楼下柳青青。尊前一唱阳关曲，别个人人第五程。
            寻好梦，梦难成。有谁知我此时情，枕前泪共阶前雨，隔个窗儿滴到明。</p>
        <p>执手相看泪眼，竟无语凝噎。念去去，千里烟波，暮霭沉沉楚天阔。
            玉惨花愁出凤城，莲花楼下柳青青。尊前一唱阳关曲，别个人人第五程。
            寻好梦，梦难成。有谁知我此时情，枕前泪共阶前雨，隔个窗儿滴到明。</p>
        <p>沧海月明珠有泪，蓝田日暖玉生烟。此情可待成追忆，只是当时已惘然。
            玉惨花愁出凤城，莲花楼下柳青青。尊前一唱阳关曲，别个人人第五程。
            寻好梦，梦难成。有谁知我此时情，枕前泪共阶前雨，隔个窗儿滴到明。</p>
    </div>
</div>
<!--<img src="images/popup-icon-vidicon.png" alt="">-->
<!--<img src="images/popup-icon-circle-n.png" alt="">-->
<!--<img src="images/popup-icon-Fboard-n.png" alt="">-->
<!--<img src="images/popup-icon-doorboard-n.png" alt="">-->
<!--<img src="images/popup-icon-suspensionboard-n.png" alt="">-->
<!--<img src="images/popup-icon-light-n.png" alt="">-->
<!--<img src="images/popup-icon-emergencylight-n.png" alt="">-->
<!--<img src="images/popup-roadlight-n.png" alt="">-->
<!--<img src="images/popup-icon-tel-n.png" alt="">-->
<!--<img src="images/pop-up-icon-detector-n.png" alt="">-->
<!--<img src="images/popup-icon-fiber-n.png" alt="">-->
<!--<img src="images/popup-icon-covi-n.png" alt="">-->
<!--<img src="images/popup-icon-no2-n.png" alt="">-->
<!--<img src="images/popup-icon-lights-n.png" alt="">-->
<!--<img src="images/popup-icon-fan-n.png" alt="">-->
<!--<img src="images/popup-icon-door-f.png" alt="">
<!--<img src="images/popup-icon-guide-n.png" alt="">-->
<!--<img src="images/popup-icon-signal-n.png" alt="">-->
<script type="text/javascript">
    $(".into").click(function () {
        $('.popover').css("display", "block");
            var arr = ['popup-icon-vidicon.png', 'popup-icon-circle-n.png', 'popup-icon-Fboard-n.png',
                'popup-icon-doorboard-n.png', 'popup-icon-suspensionboard-n.png','popup-icon-light-n.png',
            'popup-icon-emergencylight-n.png','popup-roadlight-n.png','popup-icon-tel-n.png',
            'pop-up-icon-detector-n.png','popup-icon-fiber-n.png','popup-icon-covi-n.png',
            'popup-icon-no2-n.png','popup-icon-lights-n.png','popup-icon-fan-n.png','popup-icon-door-f.png',
            'popup-icon-guide-n.png','popup-icon-signal-n.png'];//图片
            var boxImg = $('.box-img')
            var loading = $('.loading')
            var act;
            function go(n) {
                act = setInterval(function () {
                    n = n + 1;
                    boxImg.find('li').eq(n).append('<img src="images/' + arr[n] + '">');//图片路经
//                    var img = '<img src="images/huan.png" alt="" style="display: block">'
//                    loading.find('li').eq(n).append(img)
                    $('.popImg').eq(n).css("display","block")
                    if (!$(".popImg").eq(n).is(":animated")) {
                        $(".popImg").eq(n - 1).css("display", "none")
                        $(".have").eq(n-1).css("display","block")
                        if(n == 0){
                            $(".have").eq(n-1).css("display","none")
                        }
                        if(n == 2){
                            boxImg.find('li img').eq(n-1).attr('src', 'images/popup-icon-circle-problem.png');
                        }
                        if (n == arr.length) {
                            clearInterval(act)
                            $('have').css("display","block")
                            $('small').text("请尽快维修设备!!!!").css("color","red")
                            $('.gaosu').css("display","none")
                            $('button').text("查看数据")
                        }
                    }
                }, 1000)
            }
            go(-1) //执行
            $('.into').unbind("click")
        }
    );


       $('button').click(function () {
             $('.data').css("display", "block");
         })
      $('.err').click(function () {
          $('.popover').css("display", "none");
      })
</script>
</body>

</html>
